<template>
  <div class="">
    <the-header-top></the-header-top>
    <div class="logistics-body">
      <logo-bar></logo-bar>
      <div class="lo-breadcrumb">
      	<v-breadcrumb :breadcrumb="breadcrumb"></v-breadcrumb>
      </div>
      <div class="wrapContent">
        <div class="page-title">
          <span></span>
          <p>{{$t('message.PersonalOrderLogisticsInfo')}}</p>
        </div>
        <div class="logistics-info">
          <div class="logistics-info-top">
            <p>{{$t('message.PersonalOrderLogisticsCompany')}}:
              <span>{{this.myExpress.fullName}}</span>
              {{$t('message.PersonalOrderLogisticsNumber')}}:
              <span>{{this.myExpress.fullNum}}</span>
            </p>
          </div>
          <div class="logistics-info-center">
            <ul class="ul-wrap">
              <template v-for="(item,index) in myExpress.context">
                <li>
                  <div class="icon-list"></div>
                  <div><span>{{item.data}}</span><span>{{item.week}}</span></div>
                  <div><span>{{item.time}}</span><span>{{item.desc}}</span></div>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TheHeaderTop from '@/components/base/TheHeaderTop'
import LogoBar from '@/components/base/LogoBar'
import VBreadcrumb from '@/components/base/VBreadcrumb'

export default {
  components: {
    TheHeaderTop,
    LogoBar,
    VBreadcrumb
  },
  data () {
    return {
      breadcrumb: [
        {
          name: this.$t('message.home'),
          path: '/'
        },
        {
          name: this.$t('message.personalCenter'),
          path: '/personal'
        },
        {
          name: this.$t('message.myOrder'),
          path: '/personal/order/0/1'
        },
        {
          name: this.$t('message.logistics'),
          path: ''
        }
      ],
      myExpress: {
        fullName: '韵达快递',
        fullNum: 25458616889154,
        context: [
          {
            data: '2017-10-15',
            week: '周日',
            time: '17:58:29',
            desc: '你的订单正在等待配货'
          },
          {
            data: '',
            week: '',
            time: '18:12:45',
            desc: '你的包裹已出库'
          },
          {
            data: '',
            week: '',
            time: '18:58:32',
            desc: '你的包裹正在等待揽收'
          },
          {
            data: '',
            week: '',
            time: '19:30:42',
            desc: '[广州市]圆通速递 广东省广州市番禺区火车南站VIP窗口收件员 已揽件'
          },
          {
            data: '2017-10-16',
            week: '周一',
            time: '03:00:34',
            desc: '[佛山市]快件已到达 佛山转运中心'
          },
          {
            data: '',
            week: '',
            time: '03:05:32',
            desc: '[佛山市]快件已从佛山转运中心发出，准备发往广东省广州市番禺区火车南站'
          },
          {
            data: '',
            week: '',
            time: '09:13:07',
            desc: '快件已到达 广东省广州市番禺区大学城'
          },
          {
            data: '',
            week: '',
            time: '09:53:45',
            desc: '广东省广州市番禺区小谷围 已收入'
          },
          {
            data: '',
            week: '',
            time: '09:53:45',
            desc: '[广州市]广东省广州市番禺区小谷围派件员：张小明 13800138000正在为您派件'
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
  .logistics-body {
    background: #f5f5f5;
    min-width: 1200px;
    padding-bottom: 40px;
  }
  .lo-breadcrumb {
    width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
  }
  .wrapContent {
    box-sizing: border-box;
    margin: 0 auto;
    width: 1200px;
    min-height: 500px;
    /*height: 804px;*/
    padding: 40px 40px 0 40px;
    background: #FFF;
  }
  .page-title {
    border-bottom: 1px solid #E6E6E6;
    padding-bottom: 24px;
  }
  .page-title span {
    display: inline-block;
    width: 4px;
    height: 18px;
    background: #FF600A;
    position: relative;
    top: 2px;
    margin-right: 10px;
  }
  .page-title p {
    display: inline-block;
    font-size: 18px;
    color: #333333;
  }
  .logistics-info-top {
    margin-top: 24px;
    margin-bottom: 62px;
  }
  .logistics-info-top > p {
    font-size: 14px;
    color: #A5A5A5;
  }
  .logistics-info-top > p > span{
    color: #666666;
  }
  .logistics-info-top > p > span:first-child{
    /*color: red;*/
    margin-right: 60px;
  }
  .logistics-info-center {
    /*border: 1px solid #000;*/
  }
  .ul-wrap {
    position: relative;
  }
  .ul-wrap li {
    padding-bottom: 41px;
  }
  .ul-wrap li div {
    display: inline-block;
    font-size: 14px;
  }
  .ul-wrap li div:nth-of-type(1){
    width: 10px;
    height: 10px;
    background: #E7E7E7;
    border-radius: 50%;
  }
  li .icon-list {
    position: relative;
    z-index: 2;
  }
  li .icon-list::after{
    z-index: 1;
    content: ' ';
    width: 2px;
    height: 54px;
    background: #E7E7E7;
    position: absolute;
    left: 4px;
    top: 10px;
  }
  li:last-child .icon-list{
    background:  #FF600A!important;
    box-shadow: 0 0 0 6px #FFE8DB;
  }
  li:last-child .icon-list::after{
    display: none;
  }
  .ul-wrap li div:nth-of-type(2){
    margin-left: 45px;
    color: #333333;
    font-weight: bold;
  }
  .ul-wrap li div:nth-of-type(3){
    position: absolute;
    left: 224px;
    color: #666666;
  }
  .ul-wrap li div:nth-of-type(2) span:first-child,  .ul-wrap li div:nth-of-type(3) span:first-child {
    margin-right: 16px;
  }
</style>
